import React from 'react';
import HolyGrailLayout from '../components/HolyGrailLayout';
import LeftSidebar from '../components/LeftSidebar';
import Navigation from '../components/Navigation';

interface ButtonProps {}

const Button: React.FC<ButtonProps> = () => {
  const mainContent = (
    <div className="main-content">
      <article className="hero-section">
        <h1>CSS 按钮样式</h1>
        <p className="hero-subtitle">
          各种精美的按钮样式和交互效果
        </p>
      </article>

      <section className="button-examples">
        <h2>按钮样式示例</h2>
        <div className="examples-grid">
          <div className="example-card">
            <h3>基础按钮</h3>
            <div className="demo-box">
              <button className="btn btn-primary">主要按钮</button>
              <button className="btn btn-secondary">次要按钮</button>
              <button className="btn btn-success">成功按钮</button>
              <button className="btn btn-danger">危险按钮</button>
            </div>
          </div>

          <div className="example-card">
            <h3>按钮尺寸</h3>
            <div className="demo-box">
              <button className="btn btn-primary btn-sm">小按钮</button>
              <button className="btn btn-primary">普通按钮</button>
              <button className="btn btn-primary btn-lg">大按钮</button>
            </div>
          </div>

          <div className="example-card">
            <h3>特殊效果</h3>
            <div className="demo-box">
              <button className="btn btn-gradient">渐变按钮</button>
              <button className="btn btn-3d">3D按钮</button>
              <button className="btn btn-neon">霓虹按钮</button>
              <button className="btn btn-glass">玻璃按钮</button>
            </div>
          </div>

          <div className="example-card">
            <h3>加载状态</h3>
            <div className="demo-box">
              <button className="btn btn-primary loading">加载中...</button>
              <button className="btn btn-primary disabled">禁用按钮</button>
            </div>
          </div>
        </div>
      </section>

      <section className="button-code">
        <h2>代码示例</h2>
        <div className="code-examples">
          <div className="code-card">
            <h4>基础按钮样式</h4>
            <pre><code>{`.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
}`}</code></pre>
          </div>
        </div>
      </section>
    </div>
  );

  const header = (
    <div className="site-header">
      <div className="header-content">
        <div className="header-top">
          <h1 className="site-title">CSS 按钮样式</h1>
          <p className="site-description">精美的按钮样式和交互效果</p>
        </div>
        <Navigation />
      </div>
    </div>
  );

  const footer = (
    <div className="site-footer">
      <div className="footer-content">
        <p>&copy; 2025 刘春生个人整理. 专注于前端技术分享</p>
        <div className="footer-links">
          <a href="#">关于我</a>
          <a href="#">联系方式</a>
          <a href="#">RSS订阅</a>
        </div>
      </div>
    </div>
  );

  return (
    <HolyGrailLayout
      header={header}
      leftSidebar={<LeftSidebar />}
      mainContent={mainContent}
      footer={footer}
    />
  );
};

export default Button;
